<template>
    <div>
        <el-container>
            <el-header>
                <div class="container">
                    <app-header/>
                </div>
            </el-header>
            <el-main>
                <div class="container">
                    <router-view/>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import AppHeader from './common/Header.vue'

    export default {
        components: {
            AppHeader
        }
    }
</script>

<style>
    body {
        margin: 0
    }

    @media (min-width: 1200px) {
        .container {
            width: 1170px
        }
    }

    .el-header {
        padding: 0;
        background-color: rgb(84, 92, 100);
        float: left
    }

    .el-main {
        padding: 0;
        height: 100%;
    }

    .container {
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
</style>